<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">

<head>
    <title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
    <meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
    <script>
        function doSomething(obj, evt) {
            alert(obj.id);
            var e = (evt) ? evt : window.event;
            if (window.event) {
                e.cancelBubble = true; // ie下阻止冒泡
            } else {
                //e.preventDefault();
                e.stopPropagation(); // 其它浏览器下阻止冒泡
            }
        }
    </script>
</head>

<body>
    <div id="parent1" onclick="alert(33)" style="width:250px;background-color:yellow">
        <p>This is parent1 div.</p>
        <div id="child1" onclick="console.log(this.id)" style="width:200px;background-color:orange">
            <p>This is child1.</p>
        </div>
        <p>This is parent1 div.</p>
        <div id="child2" onclick="console.log(this.id)" style="width:200px;background-color:orange">
            <p>This is child2.</p>
        </div>
        <p>This is parent2 div.</p>
    </div>
    <br />
    <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
        <p>This is parent2 div.</p>
        <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
            <p>This is child2. Will bubble.</p>
        </div>
        <p>This is parent2 div.</p>
    </div>
</body>

</HTML>